<template>
	<view style="display: flex;justify-content: center;align-items: center;">
		<view style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-between">
			<view class="contentAll ">
				<view class="myhead">
					<text style="padding-left: 5rpx;size: 2rpx;">头像</text>
					<image @click="changeImg" :src="userMessage.avatar?userMessage.avatar:'https://mp-1304767866.cos.ap-guangzhou.myqcloud.com/mini/2024/09/29/d197f1d9946a407ca48a94b7f81a9db7.png'"
						class="headimage"></image>
				</view>
				<view class="myview">
					<text style="padding-left: 5rpx;size: 2rpx;">昵称</text>
					<input style="text-align: right;" v-model="userMessage.nickName" placeholder="请填写昵称"
						class="mytext"></input>
				</view>
				<view class="myview">
					<text style="padding-left: 5rpx;size: 2rpx;">真实姓名</text>
					<input style="text-align: right;" v-model="userMessage.realName" placeholder="请填写真实名字"
						class="mytext"></input>
				</view>
				<view class="myview">
					<text style="padding-left: 5rpx;size: 2rpx;">备注</text>
					<input style="text-align: right;" v-model="userMessage.remark" placeholder="请填写备注信息"
						class="mytext"></input>
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
		<button class="settingSubmit" @click="submit">确定</button>
	</view>
</template>
<script>
	import configService from '../../../common/config.service';
	export default {
		data() {
			return {
				userMessage: {
					id: 2,
					avatar: '/static/myhead.png',
					nickName: '飞翔的鸟',
					realName: '',
					remark: ''
				},
				file: {},

			}
		},
		methods: {
			changeImg() {
				let that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success(res) {
						if (res.tempFiles[0].fileType !== 'image') {
							this.$refs.uToast.show({
								type: 'warning',
								title: "图片上传格式错误!"
							});
							return;
						}
						that.file = res.tempFiles[0];
						that.userMessage.avatar = res.tempFiles[0].tempFilePath;
					}
				})
			},
			async uploadImage() {
				let that = this;
				await uni.uploadFile({
					url: configService.crmUrl + '/sys/common/upload',
					filePath: that.userMessage.avatar,
					name: 'file',
					header: {
						'X-Requested-With': 'XMLHttpRequest',
						'X-Access-Token': that.$store.state.phone_login_token,
						'x-requested-with':'xmlhttprequest'
					},
					formData: {
						'biz': "temp"
					},
					success: async (res) => {
						if (res.statusCode == 200) {
							that.userMessage.avatar = await JSON.parse(res.data).message;
							that.realSubmit();
						} else {
							that.$refs.uToast.show({
								type: 'error',
								title: "图片上传失败，请重试!"
							});
						}
					},
					fail: function(res) {
						that.$refs.uToast.show({
							type: 'error',
							title: "图片上传失败，请重试!"
						});
					}
				})
			},
			// 提交申请
			async submit() {
				if (this.userMessage.nickName === '') {
					this.$refs.uToast.show({
						type: 'warning',
						title: "请完善内容!"
					});
					return;
				}
				if (!this.file) this.realSubmit();
				else await this.uploadImage();
			},
			// 真正调用上传方法，否则有异步问题
			async realSubmit() {
				let result = await this.$api.editUser(this.userMessage);
				if (!result?.success) {
					this.$refs.uToast.show({
						type: 'error',
						title: "信息修改失败!"
					});
				} else {
					this.$refs.uToast.show({
						type: 'success',
						title: "信息修改成功!"
					});
					let now = JSON.parse(this.$store.state.user_message);
					now.avatar = this.userMessage.avatar;
					now.nickName = this.userMessage.nickName;
					now.realName = this.userMessage.realName;
					this.$u.vuex('user_message', JSON.stringify(now));
				}
			},
		},
		onLoad() {
			if (this.$store.state.phone_login_token) {
				const {
					id,
					avatar,
					nickName,
					realName
				} = JSON.parse(this.$store.state.user_message);
				this.userMessage.id = id;
				this.userMessage.avatar = avatar;
				this.userMessage.nickName = nickName;
				this.userMessage.realName = realName;
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>

<style scoped lang="scss">
	.contentAll {
		display: flex;
		/* 启用 flexbox 布局 */
		height: 100vh;
		justify-content: flex-start;
		/* 子元素从顶部开始排列*/
		align-items: center;
		/* 垂直方向上居中 */
		width: 100%;
		flex-direction: column;
		/* 改为垂直排列子元素 */
		margin-left: auto;
		margin-right: auto;
	}

	.myhead {
		width: 90%;
		display: flex;
		align-items: center;
		height: 11%;
		border-bottom: 2rpx solid #dfdfdf;
	}

	.myview {
		width: 90%;
		display: flex;
		align-items: center;
		height: 8%;
		border-bottom: 2rpx solid #dfdfdf;
	}

	.settingSubmit {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		background-color: #FBCB11;
		padding: 0;
		margin-bottom: 60rpx;
		position: absolute;
		bottom: 0rpx;
		&::after{
			display: none;
		}
	}

	.headimage {
		width: 60rpx;
		height: 60rpx;
		margin-right: 5rpx;
		border-radius: 50%;
		/* 使其成为圆形 */
		object-fit: cover;
		margin-left: auto;
		/* 将图片推到右侧 */
	}

	.mytext {
		width: auto;
		height: auto;
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 5rpx;
		margin-left: auto;
	}
</style>